<template>
  <div class="page">
    <!-- 总数 -->
    <div class="total">共 {{total}} 条</div>
    <!-- <div class="total">共{{pageCount}}页</div> -->
    <!-- 上一页 -->
    <div class="prev" :style="{cursor:current==1?'not-allowed':'pointer'}" @click="prePage">
      上一页
    </div>
    <!-- 分页 -->
    <div class="pager">
      <!-- <span class="omit" v-if="current > 1">···</span> -->
      <div class="item" v-for="(item,i) in pageCount" :key="'a'+i" :class="{active:current==item}">
        <div class="itemValue" @click="handleCurrentPage(item)">{{item}}</div>
      </div>
      <!-- <span class="omit" v-if="current < pageCount">···</span> -->
    </div>
    <!-- 下一页 -->
    <div class="next" :style="{cursor:current==pages?'not-allowed':'pointer'}" @click="nextPage">
      下一页
    </div>
    <!-- 每页显示多少条 -->
    <div class="sizes">
      <div class="select" @click="handleVisible"><span>{{value}} 条/页</span></div>
      <div class="icon" :style="{transform: flag==false?'translateY(-50%);':''}">
        <img :src="require('@/assets/icon/down.png')">
      </div>
      <div v-if="flag" class="option" >
        <span class="op_item" :class="{activeValue:value==item}" 
          v-for="(item,idx) in pageSizes" :key="'b'+idx"
          @click="sizeChange(item)">
          {{item}} 条/页
        </span>
      </div>
    </div>
    <!-- 跳转 -->
    <div class="jumper">
      <span style="margin-right:10px;">跳至</span>
      <input type="text" v-model.number="page" @focus="onFocus" @blur="pageChange">
      <span style="margin-left:10px;">页</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "page",
  components: {},
  props: {
    total:{
      type: String | Number,
      default: 0
    },
    pageSize:{
      type: String | Number,
      default: 10
    },
    currentPage:{
      type: String | Number,
      default: 1
    },
    pageSizes:{
      type: Array,
      default: () => [5,10,15,20]
    },
  },
  data () {
    return {
      pages: null,//总页数
      page: 1,//跳转至某一页
      current: 1,//当前页
      value: this.pageSize,//每页显示几条
      flag: false,//控制select显示
    }
  },
  computed: {
    pageCount(){
      let totalPage = Math.ceil(this.total / this.pageSize) || 1;
      this.pages = totalPage;
      // 总页数小于5等于，不显示 ...
      if(this.pages <= 5 ) return this.pages;
      // 当前页码等于1
      if(this.current == 1) return [1,2,3,'···',this.pages];
      // 当前页码小于等于2
      else if(this.current <= 2) return [1,2,3,4,'···',this.pages];
      // 当前页码小于等于3
      else if(this.current <= 3) return [1,2,3,4,5,'···',this.pages];
      //当前页码大于等于最后一页-3
      else if(this.current > this.pages - 3){
        //[1,'...',尾页-2,尾页-1,尾页]
        return [1,'···',this.pages-2,this.pages-1,this.pages];
      }
      //当前页码大于3并且当前页码小于最后一页页码-3
      else {
        //[1,'...',当前页-1,当前页,当前页+1,'...',尾页]
        return [1,'···',this.current-1,this.current,this.current+1,'···',this.pages];
      }
    }
  },
  watch: {
    currentPage:{
      handler(){
        this.current = this.currentPage
      },
      deep: true,
      immediate: true,
    }
  },
  created () {},
  mounted () {
    // 点击其他区域隐藏options
    document.addEventListener("click", (e) => {
      let that = this
      if (!this.$el.contains(e.target)) {
        that.flag = false; //点击其他区域关闭
      }
    });
  },
  methods: {
    // 上一页
    prePage(){
      if(this.current === 1) return;
      -- this.current;
      this.flag = false;
      this.$emit('currentchange',this.current);
    },
    // 下一页
    nextPage(){
      if(this.current === this.pages) return;
      ++ this.current;
      this.flag = false;
      this.$emit('currentchange',this.current);
    },
    // 选择页码
    handleCurrentPage(val){
      this.flag = false;
      if(val == '···'){//后期优化
        return 
      } else {
        this.current = val;
        this.$emit('currentchange',this.current);
      }
    },
    // 隐藏显示options
    handleVisible(){
      this.flag = !this.flag;
    },
    // 获取option的值
    sizeChange(val){
      this.value = val;
      this.flag = false;
      this.$emit('sizeChange',this.value);
    },
    // 跳转至某一页
    pageChange(){
      this.$emit('currentchange',this.page);
    },
    onFocus(){
      this.flag = false;
    }
  },
  filters: {},
}
</script>

<style lang="less" scoped>
.page {
  height: 75px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  .omit{//省略号
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
  }
  .prev{
    padding: 3px 8px;
    margin-left: 20px;
    border: 1px solid #cdcdcd;
    &:hover{
      border: 1px solid #3089fd;
      color:#3089fd;
    }
  }
  .pager{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    .item{
      background-color: #fff;
      border: 1px solid #cdcdcd;
      margin-right: 5px;
      cursor: pointer;
      &:nth-last-child(1){
        margin-right: 0;
      }
      &:hover{
        border: 1px solid #3089fd;
        color:#3089fd;
      }
      .itemValue{
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
      }
    }
    .active{
      border: 1px solid #3089fd;
      color:#3089fd;
    }
  }
  .next{
    padding: 3px 8px;
    margin-right: 20px;
    border: 1px solid #cdcdcd;
    &:hover{
      border: 1px solid #3089fd;
      color:#3089fd;
    }
  }
  .sizes{
    position: relative;
    margin-right: 20px;
    .select{
      width: 103px;
      height: 30px;
      line-height: 30px;
      padding: 0 8px;
      border: 1px solid #cdcdcd;
      cursor: pointer;
      &:hover{
        border: 1px solid #3089fd;
        color:#3089fd;
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
    .icon{
      position: absolute;
      top: 2px;
      right: 10px;
    }
    .option{
      position:absolute;
      margin-top: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 2px 10px 3px #ccc;
      border-radius: 5px;
      .op_item{
        width: 103px;
        text-align: center;
        padding: 2px 10px;
        &:hover{
          background-color: #f3f3f3;
        }
      }
    }
    .activeValue{
      background-color: #f3f3f3;
      color:#3089fd;
    }
  }
  .jumper{
    input{
      width: 50px;
      height: 32px;
      line-height: 32px;
      border: 1px solid #cdcdcd;
      padding-left: 10px;
      &:hover{
        border: 1px solid #3089fd;
        color:#3089fd;
      }
    }
    input:focus{
      border: 1px solid #3089fd;
    }
  }
}
</style>